<template>
	<view>
		<unicloud-db ref="udb" v-slot:default="{data,loading,error,options}"
			collection="my-music-songlist,my-music,my-music-styles,my-music-categories"
			:where="`_id=='${SonglistDetailId}'`" loadtime="onready" getone field="_id as id,create_date,description,listName,listPoster,style_ids{_id as id,name},
		music_array{_id as id,title,author,music_src,poster},category_ids{_id as id,name}">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading">Loading</view>
			<view v-else-if="data">
				<!-- 歌单信息 -->
				<view class="flex">
					<view class="">
						<image :src="data.listPoster" mode=""></image>
					</view>
					<view class="ml-5">
						<view class="text-2xl"> <text selectable>{{data.listName}}</text></view>
						<view class="text-sm text-base mt-3 ml-3">{{data.description}}</view>
						<view class="flex text-xs mt-3">
							<t-btn color="base" rounded="full" ghost size="h-4 text-xs opacity-60">乐器:</t-btn>
							<t-btn color="success" size="h-4 text-xs m-1 opacity-40" rounded="full"
								v-for="(yq,yindex) in data.category_ids ">{{yq.name}} </t-btn>
						</view>
						<view class="flex text-xs">
							<t-btn color="base" rounded="full" ghost size="h-4 text-xs opacity-60">风格:</t-btn>
							<t-btn color="warning" size="h-4 text-xs m-1 opacity-40" rounded="full"
								v-for="(fg,yindex) in data.style_ids ">{{fg.name}} </t-btn>
						</view>
						<view class="flex text-xs ml-3 mt-1 text-base">播放量：12.1万 | 收藏量：725</view>
						<view class="flex text-xs ml-3 mt-3 text-base">
							<t-btn @click="$emit('playList',data.music_array)" color="primary" size="mr-1 w-25 h-7 text-md text-base">
								<t-icon type="play-square" size="1rem" class="mr-1" />播放全部
							</t-btn>
							<t-btn outline color="base" size="mr-1 w-20 h-7 text-md">收藏</t-btn>
							<t-btn outline color="base" size="mr-1 w-20 h-7 text-md">评论</t-btn>
							<t-btn outline color="base" size="mr-1 w-20 h-7 text-md">更多</t-btn>
						</view>
					</view>
				</view>
				<!-- 歌曲列表 -->
				<uni-table  stripe emptyText="暂无更多数据" class="mt-5" >
				    <!-- 表头行 -->
				    <uni-tr>
				        <uni-th align="center"> </uni-th>
				        <uni-th align="left">歌曲名</uni-th>
				        <uni-th align="left">音乐人</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
				    <uni-tr v-for="(music,mindex) in data.music_array" :key="mindex" @click="$emit('playOne',music)">
				        <uni-td align="center">{{mindex+1}}</uni-td>
				        <uni-td>{{music.title}}</uni-td>
				        <uni-td>{{music.author}}</uni-td>
				    </uni-tr>
				</uni-table>
				<view >
				</view>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		props: {
			SonglistDetailId: String
		},
		mounted() {
			this.$refs.udb.loadData()
		}
	}
</script>

<style>

</style>
